<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="审批详情"></uni-navbar></view>

		<view class="info-title" v-if="clock.id">
			<view class="title-top">
				<view class="top-img"><image class="sub-img" :src="$imagePreview(clock.logo)" mode="aspectFill"></image></view>
				<view class="top-btm">
					<view class="left-name clamp">{{ clock.userName }}</view>
					<view class="left-job clamp">【{{ clock.deptName }}】</view>
				</view>
				<view class="top-type" :style="'color: ' + colorMap[clock.approvalStatus]">{{ clock.approvalStatusLabel }}</view>
			</view>
		</view>

		<view class="form-box form-box-show" v-if="clock.id">
			<u-form ref="uForm">
				<u-form-item class="form-item" label="所在部门">{{ clock.deptName }}</u-form-item>
				<u-form-item class="form-item" label="补卡时间">{{ clock.beginTime }}</u-form-item>
				<u-form-item class="form-item" label="补卡理由 "><view class="overflow" v-html="clock.clockReason"></view></u-form-item>
			</u-form>
		</view>

		<view class="file-list" v-if="fileList.length > 0">
			<view>附件:</view>
			<view class="file-item" v-for="(item, index) in fileList" :key="index" @click="$showLine(item)">
				<view class="file-name clamp">{{ item.name }}</view>
				<view class="right-type">预览</view>
			</view>
		</view>

		<view class="sched-box" v-if="approveList.length > 0">
			<u-time-line class="sched-line">
				<u-time-line-item v-for="(item, index) in approveList" :key="item.id" nodeTop="0">
					<template v-slot:node>
						<image class="node-img" :src="$imagePreview(item.approveUserLogo)" mode="aspectFill"></image>
					</template>
					<template v-slot:content>
						<view class="sched-content" v-if="index == 0">
							<view class="sched-top">
								<view class="sched-user">{{ item.approveUserName }}</view>
								<view class="sched-time">{{ item.approveTime }}</view>
							</view>
							<view class="sched-desc">{{ item.nodeName }}</view>
						</view>
						<view class="sched-content" v-else-if="item.approveFlag">
							<view class="sched-top">
								<view class="sched-user">
									{{ item.approveUserName }}
									<u-icon name="checkmark-circle-fill" color="#78C06E" size="30" v-if="item.approveFlag == 1"></u-icon>
								</view>
								<view class="sched-time">{{ item.approveTime }}</view>
							</view>
							<view class="sched-desc">{{ item.approveFlagLabel }}</view>
						</view>
						<view class="sched-content" v-else>
							<view class="sched-top">
								<view class="sched-user">{{ item.remark }}</view>
							</view>
							<view class="sched-desc">{{ item.nodeName }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>

		<view class="fiexd-btm" v-if="disposeId">
			<view class="flex-box">
				<u-button class="form-btn" type="success" @click="approve(1)">同意</u-button>
				<u-button class="form-btn" type="error" @click="approve(2)">拒绝</u-button>
			</view>
		</view>

		<view class="fiexd-btm" v-if="undo && clock.id && clock.approvalStatus != 5">
			<view class="flex-box">
				<u-button class="form-btn" type="success" @click="editTo(1)" v-if="clock.approvalStatus == 6">修改</u-button>
				<u-button class="form-btn" type="error" @click="editTo(2)" v-if="clock.approvalStatus != 5">撤销</u-button>
			</view>
		</view>

		<view v-if="false && approveList"></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			fileList: [],
			colorMap: {
				0: '#303133',
				1: '#f29100',
				2: '#18b566',
				3: '#dd6161',
				4: '#0099ff',
				5: '#ff9900',
				6: '#19be6b',
				7: '#ff3333',
				8: '#909399'
			},

			id: '',
			undo: '',
			disposeId: '',
			clock: {},
			approveList: []
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.undo = option.undo;
		this.disposeId = option.disposeId;

		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
			} else {
				this.$logout();
			}
		},
		loadData() {
			this.$request('/attndVacate/oa-attnd-clock/query/' + this.id).then((res) => {
				this.fileList = res.data.fileList;
				this.approveList = res.data.approveList;
				this.clock = res.data.oaAttndClock;
			});
		},
		approve(e) {
			let data = {};
			data = {
				id: this.disposeId,
				approveFlag: e.toString(),
				approveIdea: e == 1 ? '同意' : '拒绝',
				currentUserId: this.userId,
				clientCode: this.clientCode
			};

			this.$request('/attndVacate/oa-attnd-clock/approve', data, {
				load: true
			}).then((res) => {
				this.$msg(res.msg);
				setTimeout(() => {
					let pre = this.$prePage();
					if (pre && pre.loadData) {
						pre.loadData('refresh');
					}
					uni.navigateBack();
				}, 500);
			});
		},
		editTo(e) {
			if (e == 1) {
				uni.navigateTo({
					url: '/pagesB/oa/add_no5?id=' + this.id
				});
			}
			if (e == 2) {
				this.$request(
					'/attndVacate/oa-attnd-clock/undo/' + this.id + '/1',
					{},
					{
						load: true
					}
				).then((res) => {
					this.$msg(res.msg);
					setTimeout(() => {
						let pre = this.$prePage();
						if (pre && pre.loadData) {
							pre.loadData('refresh');
						}
						uni.navigateBack();
					}, 500);
				});
			}
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	border-top: 20rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
	}
}

.fiexd-btm {
	position: static;
	border-top: 20rpx solid $u-border-color;
	padding: 30rpx;
}

.info-title {
	padding: 32rpx 30rpx;
	border-top: 20rpx solid $u-border-color;
}

.title-top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.top-img {
		margin-right: 58rpx;

		image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 88rpx;
		}
	}

	.top-type {
		padding: 0 20rpx;
		font-size: 14px;
		line-height: 48rpx;
		border: 2rpx solid;
		border-radius: 30rpx;
		text-decoration: none;
	}

	.top-btm {
		margin-right: auto;
		width: 380rpx;
		font-size: 13px;
		line-height: 40rpx;

		.left-name {
			margin-bottom: 8rpx;
			font-size: 18px;
		}

		.left-job {
			text-indent: -0.5em;
		}
	}
}

.sched-box {
	padding: 30rpx 30rpx 30rpx 78rpx;
	border-top: 20rpx solid $u-border-color;

	.sched-content {
		margin-left: 44rpx;
		font-size: 13px;
		color: #666;
		line-height: 44rpx;
		min-height: 44rpx;
	}

	.sched-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sched-user {
		font-size: 16px;
		color: #333;
	}

	.node-img {
		width: 88rpx;
		height: 88rpx;
		border-radius: 88rpx;
	}
}
</style>
